<template>
    <h2>房型修改页面</h2>
    <table>
        <tr>
            <td>房型名称</td>
            <td>
                <input type="text" v-model="type.RT_Name"/>
            </td>
        </tr>
        <tr>
            <td>门市价</td>
            <td>
                <input type="text" v-model="type.RT_Price"/>
            </td>
        </tr>
        <tr>
            <td>押金</td>
            <td>
                <input type="text" v-model="type.RT_Deposit"/>
            </td>
        </tr>
        <tr>
            <td>面积</td>
            <td>
                <input type="text" v-model="type.RT_Size"/>
            </td>
        </tr>
        <tr>
            <td>可住人数</td>
            <td>
                <input type="text" v-model="type.RT_Num"/>
            </td>
        </tr>
        <tr>
            <td>房型图片</td>
            <td>
                <img style="width:100px;height:100px" :src="type.RT_Img"/>
                <input type="file" @change="FileUpLoad"/>
            </td>
        </tr>
        <tr>
            <td>是否加床</td>
            <td>
                <input type="radio" :value="true" v-model="type.RT_AddBed"/>加床
                <input type="radio" :value="false" v-model="type.RT_AddBed"/>不加床
            </td>
        </tr>
        <tr>
            <td>是否投放</td>
            <td>
                <input type="radio" :value="true" v-model="type.RT_State"/>投放
                <input type="radio" :value="false" v-model="type.RT_State"/>不投放
            </td>
        </tr>
        <tr>
            <td>房型介绍</td>
            <td>
                <input type="text" v-model="type.RT_Info"/>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="修改" @click="editRoomType"/>
            </td>
        </tr>

    </table>
</template>

<script setup lang="ts">
    import {ref,onMounted} from 'vue'
    import axios from 'axios'
    import {useRouter} from 'vue-router'
 const router=useRouter();
    const file=ref(null);
    const FileUpLoad=(e)=>{
        file.value=e.target.files[0];
        if(!file.value)
        {
            alert('请上传文件');
            return;
        }
        const formData=new FormData();
        formData.append('image',file.value);
        axios.post('https://localhost:44320/api/Files/FileUpLoad',formData)
        .then(res=>{
            console.log(res.data);
            if(res.data.StateCode==2)
            {
                alert(res.data.StateMessage);
            }
            else  if(res.data.StateCode==3)
            {
                alert(res.data.StateMessage);
            }
            else
            {
                alert(res.data.StateMessage);
                type.value.RT_Img=res.data.StateData;
            }
        })
    }
    const type=ref({
      "RT_Id": 1,
      "RT_Name": "普通标间",
      "RT_Price": 100,
      "RT_Deposit": 100,
      "RT_Size": 50,
      "RT_Num": 1,
      "RT_AddBed": false,
      "RT_Img": "https://localhost:44320/Images/1.png",
      "RT_Info": "满足基本出差需要",
      "RT_State": true
    })
    const params=new URLSearchParams(location.search);
    const tid=params.get('tid');
    const editRoomType=()=>{
        if(type.value.RT_Name=="")
        {
            alert('不能为空');
            return;
        }
        axios.put('https://localhost:44320/api/Room/TypeEdit',{
            "RT_Id": tid,
            "RT_Name": type.value.RT_Name,
      "RT_Price":  type.value.RT_Price,
      "RT_Deposit": type.value.RT_Deposit,
      "RT_Size": type.value.RT_Size,
      "RT_Num": type.value.RT_Num,
      "RT_AddBed":  type.value.RT_AddBed,
      "RT_Img":  type.value.RT_Img,
      "RT_Info":  type.value.RT_Info,
      "RT_State":  type.value.RT_State
        })
        .then(res=>{
           if(res.data>0)
            {
                alert('修改成功');
                router.push('/showRType');
            }
            else
            {
                alert('修改失败');
            }
        })
    }
    onMounted(()=>{
        axios.get('https://localhost:44320/api/Room/TypeBack',{
            params:{
                tid:tid
            }
        })
        .then(res=>{
            type.value=res.data;
        })
    })

</script>